<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 各类数据 -->
            <div class="shop_number">
              <p class="title">我的收益</p>
              <div class="number">
                <div class="each"><p>累计收益</p><p>-</p></div>
                <div class="line"></div>
                <div class="each"><p>当月销售额</p><p>00.00</p></div>
                <div class="each"><p>主订单数</p><p>{{total}}</p></div>
                <div class="each"><p>当月赚(元)</p><p>-</p></div>
              </div>
            </div>
            <div class="shop_number shop_list">
              <div class="titleBox">
                <p class="title">设备列表</p>
                <p class="more" @click="dialogVisible = true">更多</p>
              </div>
              <div class="number1">
                <div class="list" v-for="(item,i) in deviceAmount" :key="item.index">
                  <p class="id">{{item.id}}</p>
                  <p>{{item.mobile}}</p>
                  <p>{{item.address}}</p>
                </div>
              </div>
            </div>
            <el-dialog title="设备列表" :visible.sync="dialogVisible"  width="50%"  :before-close="handleClose">
              <div class="list" v-for="(item,i) in deviceAmount" :key="item.index">
                <p class="id">{{item.id}}</p>
                <p>{{item.mobile}}</p>
                <p>{{item.address}}</p>
              </div>
            </el-dialog>

            <!-- 收益明细 -->
            <div class="returns_detailed">
              <p class="title">收益明细</p>
              <div class="searchBox">
                <div class="search" @keyup.enter="order()">
                  <el-date-picker v-model="value1" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp"></el-date-picker>
                  <el-input v-model="input" placeholder="请输入设备ID" onfocus="this.placeholder=''" onblur="this.placeholder='请输入会员名'" clearable></el-input>
                  <el-button @click="order()">搜索</el-button>
                </div>
              </div>
              <div class="saleroom">
                <div class="box">
                  <p>销售金额</p>
                  <p>0.00 <i>元</i></p>
                </div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="id" label="设备ID" width="100"></el-table-column>
                  <el-table-column prop="tradeId" label="消费记录">
                    <template slot-scope="scope">
                      <p>洗车</p>
                      <p>创建时间：{{scope.row.startTime}}</p>
                      <p v-if="scope.row.endTime!=null">结算时间：{{scope.row.endTime}}</p>
                      <p v-if="scope.row.endTime==null">结算时间：-</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="订单状态" width="120">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status== 1" class="userStatus1">使用中</span>
                      <span v-if="scope.row.status== 2" class="userStatus2">已完成</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="money" label="销售金额" width="120"></el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10,20,30,40,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'Index',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        deviceAmount:[],//设备列表
        dialogVisible: false,//
        value1:null,//开始时间结束时间
        input:null,//搜索框内容
        page: 1,//页码
        pageSize: 20,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        tableData: [],// 收益表格
        multipleSelection: [], // 选择后的列表
      }
    },
    mounted(){
      // this.getUserAmount();// 我的收益
      this.getDevice();//我的设备
      this.order();//收益明细
    },
    methods: {
      // 关闭弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 我的收益
      getUserAmount(){
        this.$axios.post(this.baseURL+'getUserAmount',{
          "requestSource":"PC"
        }).then((res)=>{
          //console.log(res,"买家数、商家数、今日新增、昨日注册数据");
          if(res.data.code==1){
            this.userAmount = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 我的设备列表
      getDevice(){
        this.$axios.post(this.baseURL+'device',{
          "agentId":localStorage.getItem('id'),
          "requestSource":"PC",
        }).then((res)=>{
          console.log(res,"设备列表");
          if(res.data.code==1){
            this.deviceAmount = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 查询收益明细
      order(){
        /* console.log("搜索内容：",this.input)
        console.log("搜索内容：",this.value1)
        var startDate = null;
        var endDate = null;
        if(this.value1){
          startDate = this.value1[0];
          endDate = this.value1[1];
        } */
        this.$axios.post(this.baseURL+'order',{
          "requestSource":"PC",
          "page":this.page,
          "pageSize":this.pageSize,
          "agentId":localStorage.getItem('id')
        }).then((res)=>{
          console.log(res,"收益明细");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
         this.order();//收益明细
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
         this.order();//收益明细
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  .hint{
    width: 100%;
    height: 30px;
    background-color: #f1dfcc;
    border-radius: 10px;
    color: #fc7656;
    line-height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .shop_number{
    width: 60%;
    height: 160px;
    background-color: #ffffff;
    margin-top: 10px;
    display: inline-block;
    .title{
      height: 20px;
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0 5px 10px;
    }
    .number{
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: flex-start;
      padding: 10px 0 0 0;
      box-sizing: border-box;
      overflow: hidden;
      .each{
        min-width: 100px;
        height: 120px;
        padding: 0 40px;
        box-sizing: border-box;
        p{
          line-height: 40px;
        }
        p:last-child{
          font-size: 18px;
          text-align: center;
        }
      }
      .line{
        width: 1px;
        height: 90px;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
      }
    }
  }
  .shop_list{
    width: 39%;
    position: absolute;
    right: 0;
    .titleBox{
      height: 20px;
      font-size: 16px;
      margin: 10px 0 5px 10px;
      display: flex;
      justify-content: space-between;
      p{
        display: inline-block;
        margin: 0;
      }
      .title{
        font-size: 16px;
        font-weight: bold;
      }
      .more{
        margin-right: 10px;
        color: #409eff;
        cursor: pointer;
      }
    }
    .number1{
      width: 100%;
      height: 120px;
      box-sizing: border-box;
      overflow: hidden;
      .list{
        width: 100%;
        height: 30px;
        overflow: hidden;
        p{
          display: inline-block;
          padding: 5px 10px;
          line-height: 30px;
        }
        .id{
          color: #409eff;
          padding-left: 10px;
        }
      }
    }
  }
  .returns_detailed{
    width: 100%;
    height: calc(100vh - 270px);
    background-color: #ffffff;
    margin-top: 10px;
    overflow: hidden;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    .title{
      width: auto;
      height: 20px;
      font-size: 16px;
      font-weight: bold;
    }
    .searchBox{
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: inline-block;
      .search{
        width: auto;
        height: 30px;
        margin: 10px 0px 9px;
        box-sizing: border-box;
        display: inline-block;
        span{
          height: 35px;
          line-height: 35px;
          display: inline-block;
        }
        >>> .el-range-editor.el-input__inner{
          padding: 0px;
        }
        >>> .el-input {
            width: 200px;
            display: inline-block;
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
        }
        >>> .el-button {
          padding: 0 10px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
  >>> .el-input__inner {
    height: 30px!important;
    line-height: 30px!important;
  }
  >>> .el-input__inner:focus{
    border-color: #d5d5d5!important;
  }
  .saleroom{
    width: 100%;
    height: 120px;
    background-color: #f0f1f6;
    display: inline-block;
    .box{
      width: 200px;
      height: 100px;
      margin: 10px;
      background-color: #ffffff;
      padding: 10px;
      box-sizing: border-box;
      p{
        line-height: 35px;
        i{
          display: inline-block;
          font-style: normal;
          color:#333333
        }
      }
      p:last-child{
        color: #409eff;
        font-size: 20px;
      }
    }
  }
  .table{
    width: 100%;
    height: calc(100vh - 500px);
    border: #ffffff 1px solid;
    box-sizing: border-box;
    margin-top: 10px;
    overflow-y: auto;
  }
  .list{
    width: 100%;
    height: 30px;
    overflow: hidden;
    p{
      display: inline-block;
      padding: 5px 10px;
      line-height: 30px;
    }
    p:nth-child(2){
      width: 100px;
    }
    .id{
      color: #409eff;
      padding-left: 10px;
    }
  }
 </style>
